<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2 v-upper-text="u"></h2>
        <h2 v-lower-text="i"></h2>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script type="text/javascript">
        //定义全局指令[公有的]
        Vue.directive('upper-text',function(el,binding){
            console.log(el,binding);
            el.innerHTML=binding.value.toUpperCase();
        })
        var vm = new Vue({
            el:'#app',
            data: {
                msg:'我在上海学vue',
                u:'i like you',
                i:'ABCDEFGHI'
            },
            //局部自定义指令[私有的]
            directives:{
                'lower-text':function(el,binding){
                    el.innerHTML = binding.value.toLowerCase();
                }
            }
        });
    </script>
</body>
</html>